<template>
  <div class="mainCon">
    <div class="mainCon">
      <div class="containercontent">
        <div class="treeDivStyle inlineblock">
          <!--:node-key="id"-->
          <el-input
            placeholder="搜索"
            v-model="filterText" size = "mini">
          </el-input>
          <el-tree :data="menuTypeList" :props="defaultProps" @node-click="handleNodeClick" ref="treeBox" node-key="detectability"
            :expand-on-click-node="false" default-expand-all :highlight-current="true" :filter-node-method="filterNode"  class="filter-tree">
              <span class="span-ellipsis" slot-scope="{ node, data }">
                <span :title="node.label">{{ node.label }}</span>
              </span>
            </el-tree>
        </div>
        <div class="inlineblock treeRightCon">
          <div class="seachTip selectw100">
            <div class="inlineblock verticalmiddle infoitem">
              <div class="inlineblock verticalmiddle">
                任务名称
              </div>
              <div class="inlineblock verticalmiddle informationItem">
                <el-input v-model="searchName" size="mini" placeholder="名称" @keyup.enter.native="readattchList(attachQuery)"></el-input>
              </div>
            </div>
             <div class="inlineblock verticalmiddle infoitem">
              <div class="inlineblock verticalmiddle">
                上传时间
              </div>
              <div class="inlineblock verticalmiddle informationItem">
                <el-date-picker v-model="createTime" type="date" placeholder="选择日期"   size = "mini" @change="readattchList(attachQuery)" style = "width:100%;" format="yyyy-MM-dd"  value-format = "yyyy-MM-dd" :clearable="false">
            			</el-date-picker>
                <!--<el-input v-model="searchName" size="mini" placeholder="名称" ></el-input>-->
              </div>
              </div>
               <div class="inlineblock basicRightDistanceA searchIcon">
                  <el-button size="mini" @click="emptySearch">清空</el-button>
                <el-button size="mini" @click="readattchList(attachQuery)">搜索</el-button>
              </div>
            </div>

          <div class="separaterowTable">
            <div class="tableTittle">
              <div><span class="fontImpact">1</span><span>文件列表</span></div>
            </div>
            <el-table :data="attachList" size='mini' class="tableCon">
              <el-table-column label="序号" fixed min-width="50px">
                <template slot-scope="scope">
                  {{scope.$index+(attachQuery.page - 1) * attachQuery.pageCount + 1}}
                </template>
              </el-table-column>
              <el-table-column prop="code" label="检查单编号" :show-overflow-tooltip = "true" min-width="100px">
              </el-table-column>
              <el-table-column prop="taskNames" label="任务名称" min-width="120px" :show-overflow-tooltip = "true">
                <!-- <template slot-scope="scope">
                  {{scope.row.fileSize == 0 ? 1 : scope.row.fileSize }} KB
                </template> -->
              </el-table-column>
              <el-table-column property="analystName" label="上传人" min-width="80px">
              </el-table-column>
              <el-table-column property="enterDate" label="上传时间" min-width="100px" :formatter="timeFormatter">
              </el-table-column>
              <el-table-column label="操作" min-width="80px">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="downloadattachment(scope.row)" v-if = "userOpernation.download.display">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block changepages">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="attachQuery.page" :page-sizes="[20,30,40]"
                :page-size="attachQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<add-attach-type :addVisible.sync='addAttachmentType' :newOrEdit="newOrEdit" :attachTypeInfo="attachTypeInfo"></add-attach-type>-->

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  // const addAttachType = () => import('./children/addAttachType.vue');



  export default {
    data() {
      return {
        menuTypeList: [
          {
            detectabilityName:"原始记录",
            children:[],
            detectability:"root"
          }
        ], //物资类型
        filterText:"",
        addAttachmentType: false, //添加物资类型
        defaultProps: {  //物资列表树继承的值
          children: 'children',
          label: 'detectabilityName',
          value: 'detectability'
        },
        newOrEdit: 'new',//是新增还是编辑
        attachTypeInfo: {
          desc:"",
        }, //点击的物资类型的信息
        arrHight: [], //树高亮显示的数组
        searchName: '',
        createTime:"",
        attachList: [], //物资列表
        attachQuery: {
          page: 1, //第几页
          pageCount: 20, //页面得记录条数，
        },
        rowNumber: 0,
        newOrEditMaterial: 'new', //是新增还是编辑物资列表
        addMaterialShow: false, //添加物资列表弹出
        marterialInfo: {}, //物资列表


      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightB', 'typeofAbilityTableDate', 'materialType', 'manujson']),
    },
    props: ['userOpernation'],
    components: {

    },
    mounted() {
      this.readmenuTypeList();
      this.readattchList(this.attachQuery);
    },
    watch: {
      attachQuery: {
        handler(val, oldVal) {
          this.readattchList(this.attachQuery)
        },
        deep: true
      },
      filterText(val) {
        this.$refs.treeBox.filter(val);
      }
    },
    methods: {
      formatter(row, column, cellValue, index) {
        return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
      },
      timeFormatter(row, column, cellValue, index) {
        return this.util.formatterDate({ cellValue: cellValue })
      },
       filterNode(value, data) {
         console.log(data,value)
        if (!value) return true;
        return data.detectabilityName.indexOf(value) !== -1;
      },
      //读取菜单
      readmenuTypeList(nid) {
        this.$http({
          method: 'post',
          apiUrl: '/original/getOriginalMenu.htm',
        }).then(res => {
          if (res.code === 0) {
            this.menuTypeList[0].children = [];
            this.menuTypeList[0].children = res.data;
            console.log(this.menuTypeList)
            // this.menuTypeList = res.data;
            // if (nid) {
            //   this.arrHight.push(nid);
            //   this.$nextTick(() => {
            //     this.$refs.treeBox.setCurrentKey(nid);// treeBox 元素的ref   value 绑定的node-key

            //   });
            // }

          }
        })
      },
      //  点击文档类型树
      handleNodeClick(val) {
        console.log(val)
        this.attachTypeInfo = val;
        this.attachQuery.page = 1;
        this.readattchList(this.attachQuery)
      },
      emptySearch(){
        this.searchName = "";
        this.createTime = "";
        this.attachQuery.page = 1;
        this.readattchList(this.attachQuery)
      },
      // 读取文档列表
      readattchList(parp) {
        // var data = {
        //   fileType:this.attachTypeInfo.code,
	       //  ids:this.attachTypeInfo.detectability,
        //   fileName: this.searchName,
        //   createTime:this.createTime,
        //   page: parp.page,
        //   pageCount: parp.pageCount,
        // }
        var data = {
          // fileType:this.attachTypeInfo.code,
          detectability:this.attachTypeInfo.detectability,
          taskName: this.searchName,
          enterDate:this.createTime,
          page: parp.page,
          pageCount: parp.pageCount,
        }
        this.$http({
          method: 'post',
          apiUrl: '/original/getOriginalByDetect.htm',
          params: data,
          isJson: true,
        }).then(res => {
          if (res.code === 0) {
            this.attachList = res.data;
          }
          if (!res.pageinfo) {
            this.rowNumber = 0;
          } else if (res.pageinfo && !res.pageinfo.rowNumber) {
            this.rowNumber = 0;
          } else {
            this.rowNumber = res.pageinfo.rowNumber;
          }
        })
      },
      //删除方法附件
      deleteattachment(row) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: 'post',
            apiUrl: '/download/fileDelete.htm',
            params: {
              id: row.id,
            },
            isJson: false,
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.readattchList(this.attachQuery)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 下载附件
      downloadattachment(row) {
        // var url = "/download/fileDownload.htm"
        var url = "/detection/originalRecordByExcel.htm"
       let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
        window.open(process.env.baseUrl + url + '?batch=' + row.id + "&token=" + token);
      },
      handleCurrentChange(val) {
        this.attachQuery.page = val;
      },
      handleSizeChange(val) {
        this.attachQuery.pageCount = val;
      },



    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .treeDivStyle {
    width: 25%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: auto;
    background: #fff;
  }

  .treeRightCon {
    width: 73%;
    height: 100%;
    vertical-align: top;
  }


  #fileBtn {
    width: 50px;
    height: 20px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .span-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
</style>
